<template>
  <div class="animate-pulse">
    <div class="space-y-4">
      <div v-for="i in rows" :key="i" class="flex items-center space-x-4">
        <div class="rounded-md bg-gray-300 h-4 w-12"></div>
        <div class="flex-1 space-y-2">
          <div class="h-4 bg-gray-300 rounded" :style="{ width: randomWidth() }"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

defineProps({
  rows: {
    type: Number,
    default: 3
  }
})

const randomWidth = () => {
  const widths = ['60%', '80%', '70%', '90%', '75%', '65%']
  return widths[Math.floor(Math.random() * widths.length)]
}
</script>